<template>
  <div>
    <el-dialog title="题目预览" :visible="previewdialog" @open="getDetail" @close="previewClose">
      <div class="border">
        <el-row :gutter="20">
          <el-col :span="6"><span>【题型】: {{getQuestionType(detail.questionType)}}</span></el-col>
          <el-col :span="6"><span>【编号】: {{detail.id}}</span></el-col>
          <el-col :span="6"><span>【难度】: {{getDifficulty(detail.difficulty)}}</span></el-col>
          <el-col :span="6"><span>【标签】: {{detail.tags}}</span></el-col>
          <el-row :gutter="20">
          </el-row>
          <el-col :span="6"><span>【学科】: {{detail.subjectName}}</span></el-col>
          <el-col :span="6"><span>【目录】: {{detail.directoryName}}</span></el-col>
          <el-col :span="6"><span>【方向】: {{detail.direction}}</span></el-col>
        </el-row>
      </div>
      <div class="border">
        <p class="que-tag">【题干】:</p>
        <p v-html="detail.question" class="question"></p>
        <div>
          <template v-if="detail.questionType==='1'">
            <p>单选题 (以下选中的答案是正确答案)</p>
            <el-radio-group v-model="radio">
              <el-radio :label="item.isRight" v-for="item in detail.options" :key="item.code">{{item.title}}</el-radio>
            </el-radio-group>
          </template>
          <template v-if="detail.questionType==='2'">
            <p>多选题 (以下选中的答案是正确答案)</p>
            <el-checkbox v-model="item.isRight" v-for="item in detail.options" :key="item.code">{{item.title}}</el-checkbox>
          </template>
        </div>

      </div>
      <div class="border">
        <span>参考答案:</span>
        <el-button type="danger" @click="videoIsShow=true">视频预览</el-button>
        <template v-if="videoIsShow">
          <div>
            <video :src="detail.videoURL" controls></video>
          </div>
        </template>
      </div>
      <div class="border">
        【答案解析:】<span v-html="detail.answer"></span>
      </div>
      <div class="remarks">
        【题目备注:】<span>{{detail.remarks}}</span>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="previewClose">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/questions.js'
import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  props: {
    previewdialog: {
      type: Boolean,
      default: false
    },
    previewId: {
      type: Number
    }
  },
  data () {
    return {
      videoIsShow: false,
      radio: 1,
      detail: {}
    }
  },
  methods: {
    previewClose () {
      this.$emit('update:previewdialog', false)
      this.videoIsShow = false
    },
    async getDetail () {
      const res = await detail({ id: this.previewId })
      const option = res.data.options.map(item => {
        if (res.data.questionType === '1') {
          return item
        } else {
          return {
            ...item,
            isRight: item.isRight !== 0
          }
        }
      })
      res.data.options = option
      this.detail = res.data
    },
    getQuestionType (v) {
      v = Number(v)
      const questType = questionType.find(item => item.value === v)
      return questType ? questType.label : ''
    },
    getDifficulty (v) {
      v = Number(v)
      const questType = difficulty.find(item => item.value === v)
      return questType ? questType.label : ''
    }
  }
}
</script>

<style scoped lang='scss'>
.remarks {
  margin-top: 20px;
}
.border {
  margin-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #000;
  .el-row {
    margin-bottom: 20px;
  }
  .question {
    color: blue;
  }
  .el-radio {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  .el-checkbox {
    display: block;
    margin-top: 5px;
    margin-bottom: 5px;
  }
}
</style>
